<template>
    <div class="authority">
        <div class="gva-table-box unit">
            <div class="gva-btn-list">
                <el-button type="primary" icon="plus" @click="addUnit">新增</el-button>
                <span style="color: red;margin-left: 10px;">注：请各单位新增部门时添加一个名称为“局领导”的部门，后面新增人员时候将各单位领导选择到此部门中</span>
            </div>
            <el-table :data="tableData">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="部门名称" prop="name" width="300">
                    <template #default="scope">
                        <el-input v-model="scope.row.departName"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="排序" prop="orderSort">
                    <template #default="scope">
                        <el-input v-model.number="scope.row.orderSort"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="left" fixed="right" label="操作" min-width="160">
                    <template #default="scope">
                        <el-button type="danger" link icon="delete" @click="deleteFj(scope.$index)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="btn-box">
                <el-button class="btn" type="primary" @click="onSubmit">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import {
    unitDepartment,
    unitSaveDepartment
} from '@/api/unit'

import { reactive, ref, onMounted, computed } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import { sortBySort } from '@/utils/format'
// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()
defineOptions({
    name: 'Yygl'
})
const appStore = useAppStore()
const form = ref({
    unitId: JSON.parse(localStorage.getItem('userInfo')).unitId
})
const searchInfo = ref({
    name: ''
})
const userStore = useUserStore()
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)
const rules = reactive({
    name: [{ required: true, message: '请输入单位性质名称', trigger: 'blur' }],
    explain: [{ required: true, message: '请输入解释内容', trigger: 'blur' }]
})
const yyglForm = ref(null)
const initForm = () => {
    yyglForm.value.resetFields()
    form.value = {
        name: '',
        explain: '',
        orderSort: ''
    }
}
const isEdit = ref(false)
const dialogTitle = ref('新增名词')
const addUnit = () => {
    departments.value.push({
        departName: '',
        orderSort: '',
        id: 0,
        status: 0
    })
}
const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
}

const departments = ref([])
// 查询
const getTableData = async () => {

}
getTableData()

onMounted(() => {
    if (localStorage.getItem('userInfo')) {
        form.value.unitId = JSON.parse(localStorage.getItem('userInfo')).unitId
    }
    getDeptData()
})
function getDeptData(){
    unitDepartment().then(res => {
        departments.value = res.result
        departments.value = sortBySort(departments.value, 'orderSort')
    })
}
const tableData = computed(() => {
    let res = []
    if(departments.value.length>0){
        res = departments.value.filter(item => item.status != -1)
    }
    return res
})
const deleteFj = (index) => {
    departments.value[index].status = -1
    //departments.value.splice(index, 1)
}

const editUnit = async (row) => {
    isEdit.value = true
    dialogTitle.value = '编辑名词'
    form.value = JSON.parse(JSON.stringify(row))
    form.value.nounId = form.value.id
    if (form.value.ico) {
        fileList.value = [{
            name: '1',
            url: form.value.ico
        }]
    }
    dialogFormVisible.value = true
}

const onSubmit = () => {
    let params = {
        unitId: form.value.unitId,
        departments: departments.value
    }
    unitSaveDepartment(params).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '保存成功!'
            })
            getDeptData()
        }
    })
}

const onReset = () => {
    searchInfo.value = {
        name: ''
    }
    getTableData()
}
const nounIds = ref([])
const handleSelectionChange = (selection) => {
    nounIds.value = selection.map(item => item.id)
}
</script>

<style lang="scss" scoped>
.gva-btn-list {
    display: flex;
}

.btn-box {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.btn {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}
</style>